<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.container{
				height: 40px;
				margin: 0 auto;
				background-color: darkslateblue;
			}
		</style>
	</head>
	<body>
		<div class="container"></div>
		<script type="text/javascript">
			window.addEventListener("load",function(){
				var clientW=0;
				var container=document.querySelector(".container");
				resize();
				window.addEventListener("resize",resize)
				function resize(){
					clientW=window.innerWidth;
					if(clientW>=1200){//超大屏幕
						container.style.width="1170px";
					}else if(clientW>=992){
						container.style.width="970px";
					}else if(clientW>=768){
						container.style.width="750px";
					}else{
						container.style.width="100%";
					}
				}
			})
		</script>
	</body>
</html>
